<template>
  <div>
    <img :src="Daohan" alt="" class="banxin tanxin" />
    <Title :src="Recommend" title="精品推荐" :AllData="JingPingData" />
    <Title :src="Hot" title="热门兑换" :AllData="ReMenData" />
    <div class="jifen">
      <Title :src="Integral" title="积分攻略" />
      <ul class="banxin tanxin">
        <li>
          <h4>签到得积分</h4>
          <div class="btn">去签到</div>
        </li>
        <li>
          <h4>购课得积分</h4>
          <div class="btn">去购课</div>
        </li>
        <li>
          <h4>推荐得积分</h4>
          <div class="btn">去推荐</div>
        </li>
        <li>
          <h4>拼团得积分</h4>
          <div class="btn">去拼团</div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import Title from "@/components/home/Title.vue";
import { GetJingPingDataApi, GetReMenDataApi } from "@/request/api";
// 1 .它是一个函数 所以要 {}  from 一个地址 这个地址只要找得到 随便用什么
// 有一个要求  就是花括号中的名字 必须要和你在这个地址当中导出的名字一模一样
// 我们在aip当中 已经请求完毕了  我们只需最后对他进行一个数据的处理 就可以了
export default {
  data() {
    return {
      Recommend: require("../assets/images/home/Recommend.png"),
      Hot: require("../assets/images/home/hot.png"),
      Integral: require("../assets/images/home/integral.png"),
      Daohan: require("../assets/images/home/banner.png"),
      JingPingData: [],
      ReMenData: [],
    };
  },
  components: {
    Title,
  },
  created() {
    // 生命周期函数 >>  在这个页面创建之前 需要执行的内容
    GetJingPingDataApi().then((res) => {
      //通过then对数据进行处理   注意 then是处理成功返回的数据  catch 是处理失败的数据 error失败
      console.log(res.data.data.data.records); //这个res是不是就是我们需要的数据了
      this.JingPingData = res.data.data.data.records; //这里就把我们要的数据  赋值给了 jingpingdata
    }),
      GetReMenDataApi().then((res) => {
        //通过then对数据进行处理   注意 then是处理成功返回的数据  catch 是处理失败的数据 error失败
        console.log(res.data.data.data.records); //这个res是不是就是我们需要的数据了
        this.ReMenData = res.data.data.data.records; //这里就把我们要的数据  赋值给了 jingpingdata
      });
  },
};
</script>
 
<style lang = "less" scoped>
@import "../assets/base.less";
.jifen {
  background-color: #f5f5f5;
  li {
    width: 285px;
    height: 168px;
    color: #fff;
    margin-bottom: 47px;
    padding-left: 20px;
    padding-top: 43px;
    background-size: 100% 100%;
    box-sizing: border-box;
    transition: background-size 0.5s linear;
    cursor: pointer;
    h4 {
      font-size: 25px;
      color: #ffffff;
      margin-bottom: 20px;
    }
    .btn {
      width: 96px;
      height: 27px;
      border: 1px solid #ffffff;
      text-align: center;
      line-height: 27px;
    }
    &:nth-of-type(1) {
      background-image: url(../assets/images/home/integral-01.png);
    }
    &:nth-of-type(2) {
      background-image: url(../assets/images/home/integral-02.png);
    }
    &:nth-of-type(3) {
      background-image: url(../assets/images/home/integral-03.png);
    }
    &:nth-of-type(4) {
      background-image: url(../assets/images/home/integral-04.png);
    }
    &:hover {
      background-size: 105% 105%;
    }
  }
}
</style>